<template>
	<view class="container flex-column">
		<view class="status_bar"></view>
		<slot name="navbar"></slot>
		<view v-for="item in Object.keys($slots).filter(item => item.indexOf('top-') !== -1)" :key="item">
			<slot :name="item"></slot>
		</view>
		<scroll-view :scroll-y="$attrs.scrollY ?? true" class="scroll-view flex-1 scrollbar-none">
			<slot></slot>
		</scroll-view>
		<view v-for="item in Object.keys($slots).filter(item => item.indexOf('bottom-') !== -1)" :key="item">
			<slot :name="item"></slot>
		</view>
		<slot name="tabbar"></slot>
	</view>
</template>

<script setup>
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
	}
	
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: transparent;
	}

	.scroll-view {
		overflow: hidden;
	}
</style>